<template>
    <l-layout class="l-tab-page" v-show="!lr_loadPage" >
        <template #left>
            <l-panel style="padding-right:0;" >
                <template #title>
                    {{$t('角色分类')}}
                    <div class="tree-setting-btn" v-if="lr_hasPageAuth('classifysSetting','buttons')" >
                        <el-tooltip effect="dark" content="分类管理" placement="top">
                            <el-button @click="handleSettingClick" type="text" icon="el-icon-setting"></el-button>
                        </el-tooltip>
                    </div>
                </template>
                <el-tree v-loading="treeLoading" :data="dataItemTree_Rolecategory"  @node-click="handleNodeClick">
                    <span class="lr-tree-node"  slot-scope="{ node}">
                        <i class="el-icon-notebook-2"></i>
                        {{ $t(node.label) }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-panel style="padding-left:0;" >
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('请输入编码/名称')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table 
                ref="mainTable"
                :columns="lr_getPageColumns(columns)"
                :dataSource="tableShowData" 
                :loading="loading" >
                <template v-slot:f_CreateDate="scope" >
                    {{lr_dateFormat(scope.row.f_CreateDate)}}
                </template>
                <template v-slot:f_Category="scope" >
                    {{lr_dataItemName(lr_dataItem['rolecategory'],scope.row.f_Category)}}
                </template>
                <template v-slot:f_EnabledMark="scope" >
                    <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="scope.row.f_EnabledMark"
                        @change="handleEnableChange(scope.row)"
                        >
                    </el-switch>
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <l-dialog 
            :title="formTitle"
            :visible.sync="formVisible"
            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form" ></my-form>       
        </l-dialog>
        
        <l-drawer 
            :title="$t('分类管理')"
            :visible.sync="classifysVisible"
            :showOk="false"
            :showClose="false"
            size="800px"
            @close="handleCloseClassifys"
            >
            <l-dataitem-index classifyCode="rolecategory"></l-dataitem-index>
        </l-drawer>

        <!--成员添加-->
        <l-fullscreen-dialog
            :title="`${$t('成员添加')}-${authName}`"
            :visible.sync="userRelationVisible"

            @ok="handleSaveUserRelation"
            @opened="handleOpenedUserRelation"
            @closed="handleClosedUserRelation"
        >
            <user-relation ref="userRelation" ></user-relation>
        </l-fullscreen-dialog>

    </l-layout>
</template>
<script>
const api = window.$api.organization.role
import MyForm from './form'
import UserRelation from '../userRelation'


export default {
    components: {
        MyForm,
        UserRelation,
    },
    props: {
    },
    data () {
        return {
            lr_isPage:true,

            classifysVisible:false,
            treeLoading:false,
            //查询
            searchWord:'',
            searchTableData:null,
            
            loading:false,
            columns: [
                {label:'编号',prop:'f_EnCode',minWidth:'110'},
                {label:'名称',prop:'f_FullName',minWidth:'120'},
                {label:'分类',prop:'f_Category',width:'100',align:'center',dataType:'dataItem',dataCode:'rolecategory'},
                {label:'创建时间',prop:'f_CreateDate',width:'160',align:'center',dataType:'datetime',format:'yyyy-MM-dd HH:mm:ss'},
                {label:'创建人',prop:'f_CreateUserName',width:'88',align:'center'},
                {label:'有效',prop:'f_EnabledMark',width:'64',align:'center'}
            ],
            tableBtns:[
                {prop:'Edit',label:'编辑'},
                {prop:'Delete',label:'删除'},
                {prop:'MemberAdd',label:'添加成员',width:60}
            ],
            tableData:[],
            category:'',
            formVisible:false,
            formTitle:'',
            formEditRow:null,
            formEdit:false,

            userRelationVisible:false,
            moduleAuthorizeVisible:false,
            appAuthorizeVisible:false,
            dataAuthorizeVisible:false,
            authName:''
        };
    },
    computed:{
        dataItemTree_Rolecategory(){
          return this.lr_dataItemTree(this.lr_dataItem['rolecategory'])
        },
        tableShowData(){
            return this.searchTableData || this.tableData;
        }
    },
    mounted () {
        this.lr_loadDataItem('rolecategory')
        this.loadTableData()
    },
    methods:{
        async loadTableData(){
            this.loading = true
            await this.lr_loadRoles(false)
            this.searchTableData = null
            this.searchWord = ''
            this.tableData = this.lr_roles
            this.loading = false
            
        },
        handleSettingClick(){
            this.classifysVisible = true;
        },
        handleCloseClassifys(){
            this.treeLoading = true;
            this.$nextTick(()=>{
                this.treeLoading = false;
            });
        },
        
        handleNodeClick(data) {
            this.category = data.value
            
            this.searchTableData = this.tableData.filter(item => item.f_Category == this.category);
        },
        hanleSearch(){
            if(this.searchWord){
                this.searchTableData = this.tableData.filter(item => item.f_FullName.indexOf(this.searchWord) >-1 || item.f_EnCode.indexOf(this.searchWord)>-1);
            }
            else{
                this.searchTableData = null;
            }
        },

        handleEnableChange(row){
            api.update(row.f_RoleId,this.$deepClone(row)).then(()=> {
                this.$message({
                    type: 'success',
                    message: '更新成功!'
                });
            })
        },
        handleAdd(){
            this.formEdit = false
            this.showForm('新增角色')
        },
        handleEdit($index,row){
            this.formEdit = true
            this.formEditRow = row
            this.showForm('编辑角色')
        },
        handleDelete($index,row){
            this.$confirm(this.$t('此操作将永久删除该数据, 是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
            }).then(() => {
                api.remove(row.f_RoleId).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.loadTableData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })        
            })
        },
        handleSave(showLoading,hideLoading){
            this.$refs.form.validateForm(()=>{
                showLoading();
                const formData = this.$refs.form.getForm();
                if(this.formEdit){// 修改数据
                    api.update(formData.f_RoleId, formData).then(()=> {
                        hideLoading()
                        this.formVisible = false;
                        this.$message({
                            type: 'success',
                            message: '更新成功!'
                        })
                        this.loadTableData()
                    }).catch(() => {
                        hideLoading()
                    })
                }
                else{// 新增数据
                    api.add(formData).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.loadTableData()
                    }).catch(() => {
                        hideLoading()
                    })
                }
            });
        },
        handleOpenedForm(){
            if(this.formEdit){
                this.$refs.form.setForm(this.formEditRow)
            }
        },
        handleCloseForm(){
            this.$refs.form.resetForm()
        },
        showForm(text){
            this.formTitle = text
            this.formVisible = true
        },

       

        /*成员添加*/
        handleMemberAdd($index,row){
            this.formEditRow = row;
            this.authName = row.f_FullName;
            this.userRelationVisible = true;
        },

        handleOpenedUserRelation(){
            this.$refs.userRelation.setForm(this.formEditRow.f_RoleId,1);
        },
        handleClosedUserRelation(){
            this.$refs.userRelation.resetForm();
        },
        async handleSaveUserRelation(){
            await this.$refs.userRelation.saveForm();
            this.userRelationVisible = false;
        }
    }
}
</script>
